Jika anda membuat suatu form upload file tentu kita membutuhkan validasi tipe file yang boleh di upload dan yang tidak boleh di upload. Berikut merupakan tutorial mengenai upload file dengan HTML dan javascript yang bisa anda terapkan pada project anda. Yang mana source code berikut bermanfaat sekali. Cara kerja source code berikut adalah melakukan validasi langsung tanpa harus reload melalui file submit php yang tentunya sangat memakan waktu lama. karena harus submit ke halaman lain untuk melakukan pengecekan.
Nah, dengan javascript kita tidak perlu melakukan reload halaman karena javascript dapat langsung mendeteksi tipe file yang ingin kita upload. Berikut adalah source code nya :
<html>
<head><title>Cara Membatasi Ekstensi File Upload Javascript HTML PHP</title>
<script>
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function Validate(oForm) {
var arrInputs = oForm.getElementsByTagName("input");
for (var i = 0; i < arrInputs.length; i++) {
var oInput = arrInputs[i];
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Maaf, " + sFileName + " Tidak Bisa Di Upload, Ekstensi Yang Diperbolehkan hanya : " + _validFileExtensions.join(", "));
return false;
}
}
}
}
return true;
}
</script>
</head>
<body>
<h3>Cara Membatasi Tipe File Upload</h3>
<form onsubmit="return Validate(this);">
File: <input type="file" name="my file" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Demikianlah source code untuk membatasi tipe file yang di input atau di upload dengan javascript. semoga bermanfaat.
Jangan Lupa Tinggalkan Komentar
Info pembuatan sistem informasi silahkan hub kontak berikut :
